<template>
  <div class="login-modal">
    <el-dialog
      custom-class="login-dialog"
      title="手机号登录"
      v-model="dialogVisible"
      width="410px"
      center
      destroy-on-close
    >
      <slot>
        <img
          src="~/assets/img/login/phone.png"
          style="display: block; margin: 10px auto; width: 18%"
          alt=""
        />
        <el-tabs type="border-card" stretch v-model="tabName">
          <el-tab-pane name="account">
            <template #label>
              <span
                ><el-icon><user /></el-icon> 密码登录</span
              >
            </template>
            <zj-form
              v-bind="modalConfig"
              v-model="formData"
              ref="zjFormRef"
            ></zj-form>
            <div class="account-control">
              <el-checkbox v-model="isRememberPswd">记住密码</el-checkbox>
            </div>
          </el-tab-pane>
          <el-tab-pane name="phone">
            <template #label>
              <span
                ><el-icon><iphone /></el-icon> 验证码登录</span
              >
            </template>
            <login-phone ref="refPhone" @closeDialog="dialogVisible = false" />
          </el-tab-pane>
        </el-tabs>
      </slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmClick">
            登 录
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
import LoginPhone from './login-phone.vue'
import ZjForm from '@/base-ui/form'
import LocalCache from '@/utils/cache'

export default defineComponent({
  components: {
    ZjForm,
    LoginPhone
  },
  emits: ['handleLogin'],
  props: {
    modalConfig: {
      type: Object,
      required: true
    },
    defaultInfo: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const zjFormRef = ref<InstanceType<typeof ZjForm>>()
    const formData = ref<any>({
      cellphone: LocalCache.getCache('cellphone') ?? '',
      password: LocalCache.getCache('password') ?? ''
    })
    const isRememberPswd = ref(true)
    watch(
      () => props.defaultInfo,
      (newValue) => {
        for (const item of props.modalConfig.formItems) {
          formData.value[`${item.field}`] = newValue[`${item.field}`]
        }
      }
    )
    // 关闭弹窗后清除缓存
    function handleClose() {
      if (!isRememberPswd.value) {
        for (const item of props.modalConfig.formItems) {
          formData.value[`${item.field}`] = null
        }
      }
      refPhone.value?.init()
    }
    const tabName = ref('account')
    const dialogVisible = ref(false)
    const refPhone = ref<InstanceType<typeof LoginPhone>>()
    // 点击登录
    const handleConfirmClick = () => {
      if (tabName.value === 'account') {
        zjFormRef.value?.formRef?.validate((vail) => {
          if (vail) {
            emit('handleLogin', isRememberPswd.value)
            dialogVisible.value = false
            handleClose()
          }
        })
      } else {
        refPhone.value?.clickLogin()
      }
    }

    return {
      dialogVisible,
      handleConfirmClick,
      formData,
      zjFormRef,
      tabName,
      refPhone,
      isRememberPswd
    }
  }
})
</script>

<style>
.account-control {
  display: flex;
  margin-top: 10px;
}
</style>
